<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>
    <script type="module">
      import initShader from "./utils/initShader.js";
      import vertex from "./shader/17/vertex.glsl?raw";
      import fragment from "./shader/17/fragment.glsl?raw";
      import { mat4 } from "gl-matrix";
      const canvas = document.querySelector(".canvas");
      const gl = canvas.getContext("webgl");
      const program = initShader(gl, vertex, fragment);
      const vertices = new Float32Array([-0.5, -0.5, 0.5, -0.5, 0, 0.5]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      const aPositionIndex = gl.getAttribLocation(program, "aPosition");
      gl.vertexAttribPointer(
        aPositionIndex,
        2,
        gl.FLOAT,
        false,
        2 * Float32Array.BYTES_PER_ELEMENT,
        0,
      );
      gl.enableVertexAttribArray(aPositionIndex);

      const uSacleIndex = gl.getUniformLocation(program, "uSacle");
      // 目标矩阵
      const matrix = mat4.create();
      // 缩放矩阵
      // mat4.scale(matrix, matrix, [0.2, 0.2, 1]);
      mat4.fromScaling(matrix, [0.2, 0.2, 0]);
      // 传递矩阵
      gl.uniformMatrix4fv(uSacleIndex, false, matrix);
      // 绘制三角形
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
  </body>
</html>
